<template>
  <div style="padding: 10px 30px">
    <div class="trade_item">
      <div class="trade_header">
        <span class="item_title">费用信息</span>
        <div v-if="!issubordinate">
          <el-button size="small" v-if="!isCost && jurisdiction.order_editCost" @click="editCost">编辑</el-button>
          <el-button size="small" @click="cancelShow" type="primary" plain v-if="isCost">取消</el-button>
          <el-button size="small" @click="saveCost" type="primary" v-if="isCost">保存</el-button>
        </div>
      </div>
      <p style="line-height: 30px">
        <span class="column_label price_text">附加费用总金额：</span>{{form.fee.extraAmount}}
      </p>


      <div style="margin: 10px 0;position: relative" v-if="!isCost">
        <div v-for="(item, index) in form.fee.extraDtos" :key="index" style="margin: 10px 0">
          <div class="item_div">
            <span class="column_label">{{item.extraName}}：</span>
            <span class="input_width" v-if="!isCost">{{item.extraCost}}</span>
          </div>
        </div>
      </div>



      <div style="margin: 10px 0;position: relative" v-else>
        <div v-for="(item, index) in costData.extraDtos" :key="index" style="margin: 10px 0">
            <div class="item_div">
              <span class="column_label">费用名称：</span>
              <el-input v-model="item.extraName" placeholder="请输入内容" class="input_width" size="small"></el-input>
            </div>
            <div class="item_div">
              <span class="column_label">附加费用金额：</span>
              <el-input v-model="item.extraCost" placeholder="请输入内容" class="input_width" size="small" type="number"></el-input>
            </div>
          <span class="icon-delete_icon" style="color: #2A97F9;cursor: pointer" @click="deleteItem(index)"></span>
        </div>
        <span class="add_money" v-if="isCost" @click="addMoney" :class="costData.extraDtos != undefined && costData.extraDtos.length ? 'noFirst' : ''">+ 添加附加费用</span>
      </div>


      <p style="line-height: 30px; " >
        <span class="column_label price_text ">产品总金额：</span>
        <span class="price_text" style="font-size: 14px">{{form.fee.productAmount}}</span>
      </p>
      <div style="height: 1px; background-color: #F3F3F3;margin-bottom: 10px"></div>
      <p style=" margin-bottom: 30px !important;" >
        <span class="column_label price_text">订单总额：</span>
        <span class="price_text" style="font-size: 14px">{{form.fee.orderAmount}}</span>
      </p>
      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="12"><div class="grid_item">
          <span class="column_label">价格条款：</span>
          <span v-if="!isCost">{{form.fee.valuationClauseName}}</span>
          <el-select v-model="costData.valuationClause" placeholder="请选择" v-else>
            <el-option
              v-for="item in priceOptions"
              :key="item.id"
              :label="item.dictKey"
              :value="item.id">
            </el-option>
          </el-select>
        </div></el-col>
        <el-col :span="12"><div class="grid_item">
          <span class="label_item">收汇方式：</span>
          <span v-if="!isCost">{{form.fee.foreignExchangeTypeName}}</span>
          <el-select v-model="costData.foreignExchangeType" placeholder="请选择" v-else>
            <el-option
              v-for="item in receivablesOptions"
              :key="item.id"
              :label="item.dictKey"
              :value="item.id">
            </el-option>
          </el-select>
        </div></el-col>
      </el-row>
      <div class="item_column">
        <span class="column_label">价格条款说明:</span>
        <el-input
        type="textarea"
        v-if="!isCost"
        :disabled="true"
        style="width: 1000px"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="form.fee.priceClauseDesc">
      </el-input>
        <el-input
          type="textarea"
          v-else
          :disabled="false"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="costData.priceClauseDesc">
        </el-input>
      </div>

      <div class="item_column">
        <span class="column_label">收汇方式说明:</span>
        <el-input
        type="textarea"
        v-if="!isCost"
        :disabled="true"
        style="width: 1000px"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="form.fee.foreignExchangeDesc">
      </el-input>
        <el-input
          type="textarea"
          v-else
          :disabled="false"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="costData.foreignExchangeDesc">
        </el-input>
      </div>

      <div class="item_column">
        <span class="column_label">保险说明:</span>
        <el-input
          type="textarea"
          v-if="!isCost"
          :disabled="true"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.fee.insureDesc">
        </el-input>
        <el-input
          type="textarea"
          v-else
          :disabled="false"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="costData.insureDesc">
        </el-input>

      </div>

      <div class="item_column">
        <span class="column_label">银行信息:</span>

        <el-input
          type="textarea"
          v-if="!isCost"
          :disabled="true"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.fee.bankInfo">
        </el-input>
        <el-input
          type="textarea"
          v-else
          :disabled="false"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="costData.bankInfo">
        </el-input>

      </div>

      <div class="item_column">
        <span class="column_label">订单条款:</span>

        <el-input
          type="textarea"
          v-if="!isCost"
          :disabled="true"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.fee.orderClause">
        </el-input>
        <el-input
          type="textarea"
          v-else
          :disabled="false"
          style="width: 1000px"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="costData.orderClause">
        </el-input>

      </div>
    </div>


    <div class="trade_item">
      <div class="trade_header" style="margin-bottom: 10px">
        <span class="item_title">买方信息</span>
      </div>
      <div style="margin-bottom: 20px">
        <div class="item_div">
          <span class="column_label">客户名称：</span>
          <span v-if="!isBuyer" class="input_width">{{form.cust.custName}}</span>
          <el-input v-model="buyerData.custName" placeholder="请输入内容" class="input_width" size="small" disabled v-else></el-input>
        </div>
        <div class="item_div">
          <span class="column_label">客户电话/传真：</span>
          <span v-if="!isBuyer" class="input_width">{{form.cust.custTelFax}}</span>
          <el-input v-model="buyerData.custTelFax" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
        </div>
      </div>
      <div style="margin-bottom: 20px">
        <span class="column_label">客户地址：</span>
        <span v-if="!isBuyer" class="input_width">{{form.cust.custAddr}}</span>
        <el-input v-model="buyerData.custAddr" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
      </div>

      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in form.cust.custLinkerDtos" :key="index"><div class="card">
          <div>
            <ul>
              <li class="linker_item textHid">
                <span style="color: #2A97F9">{{item.linkerName}}</span>
              </li>
              <li class="linker_item textHid">
                <span>职位：</span><span class="send_mail">{{item.postType}}</span>
              </li>
              <li class="linker_item textHid">
                <span>邮箱：</span><span>{{item.email}}</span>
              </li>
              <li class="linker_item textHid">
                <span>联系人电话：</span><span>{{item.telFax}}</span>
              </li>
            </ul>
          </div>

        </div></el-col>

      </el-row>

    </div>

    <div class="trade_item">
      <div class="trade_header" style="margin-bottom: 10px">
        <span class="item_title">货运信息</span>

        <div v-if="!issubordinate">
          <el-button size="small" v-if="!isCargo && jurisdiction.order_editFreight" @click="editCargo">编辑</el-button>
          <el-button size="small" @click="isCargo = false" type="primary" plain v-if="isCargo">取消</el-button>
          <el-button size="small" @click="saveCargo" type="primary" v-if="isCargo">保存</el-button>
        </div>
      </div>

      <div style="margin-bottom: 20px">
        <div class="item_div">
          <span class="column_label">装运期限：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.shipmentPeriod}}</span>
          <el-date-picker
            v-else
            class="input_width"
            value-format="yyyy-MM-dd"
            v-model="cargoData.shipmentPeriod"
            type="date"
            size="small"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="item_div">
          <span class="column_label">装运港口：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.shipmentPort}}</span>
          <el-input v-model="cargoData.shipmentPort" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
        </div>
      </div>

      <div style="margin-bottom: 20px">
        <span class="column_label">目的港口：</span>
        <span v-if="!isCargo" class="input_width">{{form.other.purposePort}}</span>
        <el-input v-model="cargoData.purposePort" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
      </div>

      <div class="item_column">
        <span class="column_label">装运期限说明:</span>
        <el-input
        style="width:1000px"
        v-if="!isCargo"
        type="textarea"
        :disabled="true"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="form.other.shipmentPeriodDesc">
      </el-input>

        <el-input
          v-else
          style="width:1000px"
          type="textarea"
          :disabled="false"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="cargoData.shipmentPeriodDesc">
        </el-input>
      </div>

      <div class="item_column">
        <span class="column_label">溢短装:</span>

        <el-input
          style="width:1000px"
          v-if="!isCargo"
          type="textarea"
          :disabled="true"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.other.moreLess">
        </el-input>

        <el-input
          v-else
          style="width:1000px"
          type="textarea"
          :disabled="false"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="cargoData.moreLess">
        </el-input>

      </div>

      <div class="item_column">
        <span class="column_label">包装说明:</span>
        <el-input
          style="width:1000px"
          v-if="!isCargo"
          type="textarea"
          :disabled="true"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.other.packageDesc">
        </el-input>

        <el-input
          v-else
          style="width:1000px"
          type="textarea"
          :disabled="false"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="cargoData.packageDesc">
        </el-input>

      </div>

      <div class="item_column">
        <span class="column_label">唛头:</span>
        <el-input
          style="width:1000px"
          v-if="!isCargo"
          type="textarea"
          :disabled="true"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.other.shippingMark">
        </el-input>

        <el-input
          v-else
          style="width:1000px"
          type="textarea"
          :disabled="false"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="cargoData.shippingMark">
        </el-input>
      </div>

      <div style="margin-bottom: 20px">
        <div class="item_div">
          <span class="column_label">货物运输方式：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.transTypeName}}</span>
          <el-select v-model="cargoData.transType" placeholder="请选择" v-else size="small" class="input_width">
            <el-option
              v-for="item in freightOptions"
              :key="item.id"
              :label="item.dictKey"
              :value="item.id">
            </el-option>
          </el-select>

        </div>
        <div class="item_div">
          <span class="column_label">收货人姓名：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.receiverName}}</span>
          <el-input v-model="cargoData.receiverName" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
        </div>
      </div>
      <div style="margin-bottom: 20px">
        <div class="item_div">
          <span class="column_label">收货人电话：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.receiverTel}}</span>
          <el-input v-model="cargoData.receiverTel" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
        </div>
        <div class="item_div">
          <span class="column_label">收货人邮箱：</span>
          <span v-if="!isCargo" class="input_width">{{form.other.recevierEmail}}</span>
          <el-input v-model="cargoData.recevierEmail" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
        </div>
      </div>
      <div style="margin-bottom: 20px">
        <span class="column_label">收货人地址：</span>
        <span v-if="!isCargo" class="input_width">{{form.other.recevierAddr}}</span>
        <el-input v-model="cargoData.recevierAddr" placeholder="请输入内容" class="input_width" size="small" v-else></el-input>
      </div>

    </div>
  </div>
</template>

<script>
  import {detailTrade, saveTrade, queryReceivablesOptions, queryPriceOptions, queryFreightOptions} from '@/api/order'
  import {mapGetters} from "vuex";
  import {toNumber} from "@/util/util"
    export default {
        name: "trade",
        props:{
            orderId: {
                type:String,
                default() {
                    return '6'
                }
            },
            issubordinate:{
                type: Boolean,
                default() {
                    return false;
                }
            }
        },
        data() {
            return {
                jurisdiction:{}, // 权限集合
                isCost:false, // 是否编辑费用
                isBuyer:false, // 是否编辑信息
                isCargo:false, // 是否编辑信息

                priceOptions: [], // 价格条款数组集合
                priceVal: '', // 价格条款
                receivablesOptions: [], // 收汇方式数组集合
                receivables: '', // 收汇方式
                freightOptions: [], // 货运方式集合
                freightVal: '', //货运方式
                form: {
                    fee:{},
                    cust:{},
                    other:{}
                },
                costData: {}, // 费用数据
                buyerData:{}, // 买方信息
                cargoData:{}, // 货运信息
            }
        },
        created() {
            this.jurisdiction = this.vaildData(this.permission)
            this.init()
            queryPriceOptions().then(res => {
                this.priceOptions = res.data.data
            })
            queryReceivablesOptions().then(res => {
                this.receivablesOptions = res.data.data
            })
            queryFreightOptions().then(res => { // 将id转为数字
                this.freightOptions = toNumber(res.data.data)
            })
            console.log(this.jurisdiction)
        },
        methods: {
            init() {
                detailTrade(this.orderId).then(res => {
                    this.form = res.data.data
                    this.form.fee = res.data.data.fee
                    this.form.cust = res.data.data.cust
                    this.form.other = res.data.data.other
                })
            },
            editCost(){
                this.isCost = true
                this.costData = JSON.parse(JSON.stringify(this.form.fee))
            },
            saveCost() { // 保存费用信息
                this.form.fee = this.costData
                this.costData.orderId = Number(this.orderId)
                this.costData.id = this.form.id
                saveTrade(this.costData).then(res => {
                  if(res.data.success) {
                      this.$message({
                          type: 'success',
                          message: res.data.msg
                      })
                      this.init()
                      this.isCost = false
                      this.$emit('updateParent')
                  }
                })
            },
            editCargo() { // 编辑货运信息
                this.isCargo = true
                this.cargoData = JSON.parse(JSON.stringify(this.form.other))
                this.cargoData.orderAmount = this.form.fee.orderAmount
            },
            saveCargo() { // 保存货运信息
                const reg1 = /^[0-9,+ \-,\\(,\\),\s]*$/

                var reg2 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

                if(reg1.test(this.cargoData.receiverTel) && reg2.test(this.cargoData.recevierEmail) ) {
                    this.cargoData.id = this.form.id
                    this.cargoData.orderId = this.orderId
                    saveTrade(this.cargoData).then(res => {
                        if(res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            this.init()
                            this.isCargo = false
                            this.$emit('updateParent')
                        }
                    })
                } else {
                    this.$message({
                        message: '请输入正确的收货人电话或邮箱',
                        type: "success"
                    })
                }
            },
            addMoney() { // 添加附加费用
                var obj = {
                    "extraName": "",
                    "extraCost": ""
                }
                this.costData.extraDtos.push(obj)
            },
            deleteItem(index) { // 删除当前附加费用
                this.costData.extraDtos.splice(index, 1)
            },
            cancelShow() { // 费用信息点击取消
                this.isCost = false
                this.init()
            },
        },
        computed: {
            ...mapGetters(["permission"]),
            extraDtos() {
                return this.costData.extraDtos
            }
        },
        watch: {
            extraDtos: {
                handler:function (value) {
                    this.form.fee.extraAmount = 0
                    value.forEach((key) => {
                        this.form.fee.extraAmount += Number(key.extraCost)
                    })
                    this.form.fee.orderAmount = Number(this.form.fee.extraAmount) + Number(this.form.fee.productAmount)
                    this.costData.orderAmount = this.form.fee.orderAmount
                    this.costData.extraAmount = this.form.fee.extraAmount
                    this.costData.orderAmount = this.form.fee.orderAmount
                },
                deep:true
            }
        }
    }
</script>

<style scoped lang="scss">
  .trade_item{
    margin-bottom: 30px;
  }
.item_title{
  font-weight: 600;
  color: #2A97F9;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 10px;
}
.price_text{
  font-weight: 600;
}
.card{
  background: #E9F3FD;
  border-radius: 8px;
  padding :5px 20px;
  margin-bottom: 10px;
}

  .trade_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item_column{
    display: flex;
    align-items: end;
    margin-bottom: 20px;
  }
  .column_label{
    display: inline-block;
    width: 105px;
  }
  .input_width{
    display: inline-block;
    width: 254px;
  }
  .item_div{
    display: inline-block;
    margin-right: 10px;
  }
  .add_money{
    display: inline-block;
    color: #2A97F9;
    cursor: pointer;
  }
  .noFirst{
    position: absolute;
    bottom: 10px;
    left: 770px;
  }
  .linker_item{
    margin:10px 0;
  }

</style>
